<template>
<div ref="wrapper">
    <div class='search' >
        <div class="main">
        <ul>
            <li @click="select(item.name)" class='border-bottom' v-for='item in searchcity' :key="item.id">{{ item.name }}</li>
        </ul>
    </div>
    </div>
    </div>
</template>


<script>
import BScroll from 'better-scroll'
export default{
    props:['searchcity'],
    mounted() {
            // console.log(this.$refs.wrap)
             this.scroll = new BScroll(this.$refs.wrapper)
    },
    methods:{
        select(name){
                  this.$store.commit('pickCity',name) 
                  this.$router.push({name:'index'})
            }
    }
}
    
</script>

<style lang="scss" scoped>
.search{
    width: 100%;
    height: 100%;
    top: 2rem;
    left: 0;
  
    .main{
        height: 100%;
        overflow: hidden;     
    ul{  
        //  height: 100%;
       li{ 
            padding-top: 0.1rem;
            color: #16BFC7;
            line-height: 0.7rem;
            padding-left: 0.2rem;
        }
    }
    }
}
</style>
